<template>
  <el-dialog v-model="drawer" title="活动分类创建" :append-to-body="true" @close="close" width="300px">
    <el-form :model="form" :rules="rules" size="small" ref="ruleRefForm" label-width="70px">
        <el-form-item label="上级分类" prop="parent" v-if="!isEdit">
            <el-select placeholder="不选默认顶级" v-model="form.leader">
                <el-option
                    v-for="item in parentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="label">
            <el-input v-model="form.name" placeholder="请输入" style="width:182px"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'ActiveClassifyCreate',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, isEdit, defaultForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    oneActivityType()
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    if(isEdit.value){
                        // 编辑状态
                        state.form = JSON.parse(JSON.stringify(defaultForm.value))
                    }
                }
            }
        )
        const state = reactive({
            form: {
                leader: '0',
                name: ''
            },
            rules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
            },
            parentList: []
        })
        const reset = () => {
            state.form = {
                leader: '0',
                name: ''
            }
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    close()
                    if(isEdit.value){
                        api.editClassType(state.form).then(res => {
                            ElMessage.success('编辑成功')
                        })
                    }else{
                        if (state.form.leader.length > 1) {
                            state.form.level = 2
                        }else{
                            state.form.level = 1
                        }
                        api.addClassType(state.form).then(res => {
                            ElMessage.success('新建成功')
                        })
                    }
                    reset()
                    setTimeout(() => {
                        context.emit('onSubmit', true)
                    }, 500)
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const oneActivityType = () => {
            api.getActivityType({leaderId: "0"}).then(res => {
                res.data.unshift({id: "0", name: "顶级"})
                state.parentList = res.data                
            })
        }
        return {
            drawer,
            close,
            submitForm,
            cancelForm,
            oneActivityType,
            ruleRefForm,
            ...toRefs(state)
        }
    }
}
</script>

<style>

</style>